<template>
	<!-- 优惠券 -->
	<view class="">
		<view class="nav">
			<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<!-- 选项卡类别列表 -->
					<view class="tab-scroll_item" v-for=" (item,index) in tabList" :key="index" 
					 :class="{'active':isActive==index}" @click="chenked(index)">
							{{item.name}}
						<view class="icons"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 内容切换 -->
		<view class="order_centext" style="padding-top: 120rpx;">
			<view class="nav_item">
				<view class="scroll-items" v-if="orderList.length > 0">
					<view class="item" v-for="(item, index) in orderList" :key="index" @tap.stop="toDetail(item)">
						<view class="jd-top-wap flex bottom-line">
							<view class="jd-img">
								<image :src="item.hotelRoomImgPath"></image>
							</view>
							<view class="jd-info mar-left-20">
								<view class="flex jcsb aic">
									<view class="dis-block w-205">
										<text class="dis-block w-205 fc-00 text-fw fs-32 margin-bottom-20">{{item.hotelName}}</text>
										<text class="dis-block w-205 fc-00 fs-26 margin-bottom-20">{{item.hotelRoomName}}</text>
									</view>
									<view class="">
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 0">待支付</text>
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 6">待审核</text>
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 7">已审核</text>
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 8">审核拒绝</text>
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 1">待入住</text>
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 2">已完成</text>
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 3">已取消</text>
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 4">已关闭</text>
										<text class="dis-block fc-dc4 fs-28 margin-bottom-20" v-if="item.status == 5">无效订单</text>
										<text class="dis-block fc-33 fs-28">¥{{item.payAmount || 0}}</text>
									</view>
								</view>
								<view class="fc-66 fs-26 mar-top-10">{{item.specifications}}</view>
								<view class="fc-66 fs-26 mar-top-15">{{item.checkInStartTime}}(入住)-{{item.checkInEndTime}}(离店)/{{item.quantity}}间</view>
								<view class="fc-66 fs-26 mar-top-10" v-if="item.reserver1 && item.status == 8"><text class="main-color">拒绝原因:{{item.reserver1}}</text></view>
							</view>
						</view>
						<view class="opera-btn flex">
							<view>
								<button v-if="item.status == 0 || item.status == 1 || item.status == 6" @tap.stop="cancel(item)">取消订单</button>
								<button v-if="item.status == 0" class="pay-but" @tap.stop="goPay(item)">立即支付</button>
							</view>
							<view v-if="item.status == 2">
								<!-- <button @tap.stop="goToHotel()">再次预定</button> -->
								<button class="pay-but" v-if="!item.commentCount" @click.stop="evaluate(item)">评价</button>
							</view>
						</view>
					</view>
				</view>
				<!-- <view  class="text-tc">暂无数据</view> -->
			</view>		
		</view>
	</view>
</template>

<script>
import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
export default {
	components: {
		mEmptyData
	},
		data() {
			return {
				tabList:[
					{name: "全部",status:''},
					{name: "待审核",status:6},
					{name: "已审核",status:7},
					{name: "待付款",status:0}, 
					{name: "待入住",status:1},
					{name: "已完成",status:2},
					{name: "已取消",status:3}, 
					{name: "已关闭",status:4}, 					
					{name: "无效订单",status:5},
				],
				isActive:0,
				page: 1, //分页
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				orderList: [],//列表
				empty:false,
				status:'',//状态
				weChatPayData:'',//支付数据				
			}
		},
		onLoad(option) {	
			if(option.status == 6){
				this.isActive = 0
				this.status = ''
			}else if(option.status == 0){
				this.isActive = 1
				this.status = option.status||''
			}else if(option.status == 1){
				this.isActive = 2
				this.status = option.status||''
			}else if(option.status == 2){
				this.isActive = 3
				this.status = option.status||''
			}else{
				this.status = option.status||''
				this.isActive = option.status
			}
			
		},
		onPullDownRefresh() {
			this.loadTop();
		},
		onReachBottom() {
			this.loadBottom();
		},
		mounted() {
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
			// this.getOrderList()
		},
		onShow() {
			console.log("show")
			this.getOrderList()
		},
		methods: {					
			//获取酒店订单列表信息
			async getOrderList() {
				uni.showLoading({title: '加载中',mask:false});
				let param={
					userId:uni.getStorageSync('wxuser_id'),
					status:this.status,
					page:this.page,
					limit: 10,
					orderTypes: "0,3"
				}
				let res= await this.$apis.getOrderHotelList(param);
				if(res){
					//关闭加载中
					setTimeout(function () {uni.hideLoading();}, 100);					
					//时间截取酒店图片
					for(var i=0;i<res.data.length;i++){
						if(res.data[i].orderType == 0){
							res.data[i].checkInStartTime = res.data[i].checkInStartTime.slice(0,10)
							res.data[i].checkInEndTime = res.data[i].checkInEndTime.slice(0,10)
							res.data[i].hotelRoomImgPath= res.data[i].hotelRoomImgPath && res.data[i].hotelRoomImgPath.split(",")[0];//逗号是分隔符			
						}									
					}					
					this.orderList = res.data			
				}
			},
			//立即支付
			goPay(item){
				var weChatPayData = JSON.parse(item.joinPayOrderResult.rcResult)
				uni.requestPayment({
					provider: 'wxpay', // 服务提提供商
					appId:weChatPayData.appId,
					timeStamp:weChatPayData.timeStamp, // 时间戳
					nonceStr:weChatPayData.nonceStr, // 随机字符串
					package:weChatPayData.package,
					signType:weChatPayData.signType, // 签名算法
					paySign: weChatPayData.paySign, // 签名
					success: (res) => {
						console.log('支付成功',res);
						setTimeout(function () {uni.hideLoading();}, 100);	
						this.chenked(2)
					},
					fail: function (err) {
						console.log('支付失败',err);
					}
				});	
			},
			// 取消订单
			cancel(item) {
				uni.showModal({
					title: '取消订单',
					content: '是否取消该订单',
					success: async (res) => {
						if (res.confirm) {
							var param = {
								orderSn: item.orderSn,
								reason: '用户取消订单'
							}
							let res= await this.$apis.cancelOrder(param);
							if(res) {
								uni.showToast({
									title:"取消成功",
									icon:'success'
								})
								this.chenked(6)
							}		
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toDetail(item) {
				/* this.$mRouter.push({
				 	route: this.$mRoutesConfig.positionDetail
				 }); */
				
			},
			evaluate(item) {
				console.log("item",item)
				var param = {
					hotelId: item.hotelId,
					hotelSubId: item.hotelSubId,
					hotelName: item.hotelName,
					orderId: item.id
				}
				uni.navigateTo({
					url:"/pages/hotel/publish-comment?orderInfo=" + encodeURIComponent(JSON.stringify(param))
				})
			},
			//上拉加载操作
			async loadBottom() {
				this.page++;
				this.getOrderList()
			},
			//再次预定
			goToHotel(){
				
			},
			//切换 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.tabList[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.tabList[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.tabList[i].width
				};
				console.log(this.tabList[index])
				this.status = this.tabList[index].status
				this.getOrderList()					
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
		.flex-1{
			flex: 1;
		}
		.lin-60{
			line-height: 60rpx;
		}		
		.nav{
			background-color: #fff;	
			position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;
			.tab-scroll{
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;
				.tab-scroll_box{
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
					.tab-scroll_item{
						width: 20%;
						line-height: 60rpx;
						margin-right:13rpx;
						flex-shrink: 0;
						padding-bottom:10px;
						display: flex;
						justify-content: center;
						font-size: 16px;
						padding-top: 10px;
						position: relative;
						.icons{
							display: none;
							width: 80rpx;
							height:6rpx;
							background: #84C0F4;
							border-radius: 4rpx;
							opacity: 1;	
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							margin: auto;
						}
					}
					.active{
						color:#333 ;
					}
					.active>.icons{
						display: block;
					}	
					/* 隐藏滚动条，但依旧具备可以滚动的功能 */
					/deep/.uni-scroll-view::-webkit-scrollbar {
						display: none
					}
				}
			}
		}
		.scroll-items{	
			.item{
				margin-bottom: 20rpx;
				background-color: #fff;
				.jd-top-wap{
					padding: 30rpx 32rpx;
					.jd-img{
						width: 84rpx;
						height: 84rpx;
						border-radius: 8rpx;
						image{
							width: 84rpx;
							height: 84rpx;
							display: block;					
							border-radius: 8rpx;
						}
					}
					.jd-info{
						flex: 1;
						.w-205{
							width: 410rpx;
							display: block;
						}
					}
				}
				.opera-btn{
					justify-content: flex-end;
					padding: 24rpx 32rpx;
					button{
						min-width: 60rpx;
						padding: 0 22rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #8EC7F9;
						border: 1px solid #8EC7F9;
					}
					.pay-but{
						background: #7BC2F8;
						color: #fff;
						margin-left: 20rpx;
					}
					.evalbut{
						border: 1px solid #7BC2F8;
						background: #fff;
						color: #7BC2F8;
					}
				}
			}
		}
	}
	
</style>
